import styles from './index.module.less'
import { Popup, Image, View } from '@hips/taro-ui'
import CloseIcon from 'assets/icons/delete.png'
import SelecetIcon from 'assets/icons/radio.png'
export default {
  name: 'RoleListPopup',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    source: {
      type: Array,
      default: () => []
    },
    selectedIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: false,
      defaultValueCopy: ''
    }
  },
  watch: {
    value(newVal) {
      this.show = newVal
    },
    show(newVal) {
      this.$emit('input', newVal)
    }
  },

  methods: {
    confirm(data) {
      this.$emit('confirm', data[0])
    },
    cancel() {
      this.show = false
    },
    changeRole(data, index) {
      if (this.selectedIndex === index) return
      this.$emit('changeRole', data)
    }
  },

  render() {
    return (
      <Popup vModel={this.show} clickOverlayClose={true} position="bottom">
        <View class={styles['role-list']}>
          <View class={styles['role-list-header']}>
            <View class={styles['role-list-header-title']}>切换角色</View>
            <Image
              onTap={this.cancel}
              src={CloseIcon}
              class={styles['role-list-header-close']}
            ></Image>
          </View>
          <View class={styles['role-list-box']}>
            {this.source.map((item, index) => {
              const isSelected = this.selectedIndex === index
              return (
                <View
                  onTap={() => this.changeRole(item)}
                  class={[
                    styles['role-list-box-item'],
                    isSelected && styles['role-list-box-selected']
                  ]}
                >
                  <View class={styles['role-list-box-item-roleName']}>
                    {item.name}
                  </View>
                  {isSelected && (
                    <Image
                      src={SelecetIcon}
                      class={styles['role-list-box-item-seletedIcon']}
                    ></Image>
                  )}
                </View>
              )
            })}
          </View>
        </View>
      </Popup>
    )
  }
}
